<script setup lang="ts">
import { FOOTER_LINK } from '@/config/home.ts';
import { useLocale } from '@/composables/useLocale.ts';
import { openUrl } from '@/utils/common.ts';
import { RECORDAL_URL } from '@/config/url-config';
const { $t } = useLocale();
</script>

<template>
  <footer class="app-footer">
    <div class="app-footer-wrap">
      <div class="footer-content">
        <div v-for="item in FOOTER_LINK" :key="item.title">
          <p class="content-title">{{ item.title }}</p>
          <div v-for="link in item.children" :key="link.title" class="link">
            <a v-if="link.link" :href="link.link" target="_blank" rel="noopener noreferrer">{{ link.title }}</a>
            <p v-else class="link-disabled">
              <span>{{ link.title }}</span>
              <span class="disabled-tag">{{ $t('header.notOnline') }}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="footer-attach">
        <div class="footer-attach-left">
          <p>{{ $t('footer.copyright') }}</p>
          <a :href="RECORDAL_URL" target="_blank" rel="noopener noreferrer">{{ $t('footer.recordal') }}</a>
        </div>
        <div class="footer-attach-right">
          <a href="/privacy" rel="noreferrer noopener">{{ $t('footer.privacyPolicy') }}</a>
          <span>&nbsp;|&nbsp;</span>
          <a href="/legal" rel="noreferrer noopener">{{ $t('footer.legalStatement') }}</a>
          <span>&nbsp;|&nbsp;</span>
          <a href="/cookies" rel="noreferrer noopener">{{ $t('footer.aboutCookies') }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.app-footer {
  background-color: #121417;
  height: var(--layout-footer-height);
  color: var(--o-color-info1-inverse);
  margin-top: var(--o-gap-7);
  @include tip2;
  position: relative;
  z-index: 99;
}

.app-footer-wrap {
  height: 100%;
  width: var(--grid-content-width);
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  padding-top: var(--o-gap-6);
  padding-bottom: var(--o-gap-5);
  margin: 0 120px;

  .content-title {
    @include tip1;
    padding-bottom: var(--o-gap-4);
  }

  a {
    @include tip2;
    display: block;
    color: var(--o-color-info2-inverse);

    @include hover {
      color: var(--o-color-info1-inverse);
    }
  }

  .link + .link {
    padding-top: var(--o-gap-2);
  }

  .link-disabled {
    display: flex;
    color: var(--o-color-info4-inverse);
    cursor: not-allowed;

    .disabled-tag {
      margin-left: var(--o-gap-1);
      border: 1px solid rgba(61, 63, 67, 1);
      border-radius: var(--o-radius-xs);
      font-size: 10px;
      color: var(--o-color-info3-inverse);
      height: 16px;
      width: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.footer-attach {
  @include tip1;
  display: flex;
  justify-content: space-between;
  color: var(--o-color-info2-inverse);
  padding-top: var(--o-gap-4);
  border-top: 2px solid rgba(#e5e5e5, 0.12);

  .footer-attach-left {
    color: #b2b2b2;
    a {
      margin-top: var(--o-gap-1);
      color: #b2b2b2;
      margin-left: var(--o-gap-1);
      @include hover {
        color: var(--o-color-info1-inverse);
      }
    }
  }
  .footer-attach-right {
    display: flex;
    justify-content: end;
    align-items: center;

    a {
      @include tip2;
      display: block;
      color: var(--o-color-info2-inverse);

      @include hover {
        color: var(--o-color-info1-inverse);
      }
    }
  }
}
</style>
